<template>
  <navigator :url="`/pages/category/goodsDetail?id=${item.goods_id_}`" class="product" v-for="item in data"
    :key="item.goods_id_">
    <image class="product_img" :src="item.product_img_" mode="aspectFill" />
    <view>
      <view class="product_name ellipsis">{{ item.goods_name_ }}</view>
      <view class="product_footer">
        规格编号：{{ item.goods_code_ }}
      </view>
      <view class="product_footer">
        规格：{{ item.product_id_ }}
      </view>
      <view class="product_footer">
        <text>￥{{ item.cal_price_ }}</text>
        <text>x{{ item.number_ }}</text>
      </view>
    </view>
  </navigator>
</template>

<script lang="ts" setup>
import type { orderItemData } from "@/types/order"

defineProps<{
  data: orderItemData[]
}>()

</script>

<style lang="scss" scoped>
.product {
  margin-bottom: 12px;
  background-color: #fff;
  display: flex;
  padding: 4px;
  border-radius: 4px;

  .product_img {
    width: 158px;
    height: 108px;
    margin-right: 12px;
    border-radius: 4px;
  }

  .product_name {
    $padding: 4px;
    padding: $padding ;
    width: calc(100% - 2 * $padding);
    font-size: 14px;
  }

  .product_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
    font-size: 14px;
    color: $uni-text-color-grey;
  }
}
</style>
